<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" ref="listQuery" :model="listQuery" class="demo-form-inline">
        <!--
        <el-form-item prop="system" label="系统">
          <el-input v-model="listQuery.system" placeholder="系统" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="systemName" label="系统名称">
          <el-input v-model="listQuery.systemName" placeholder="系统名称" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="service" label="服务">
          <el-input v-model="listQuery.service" placeholder="服务" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="serviceName" label="服务名">
          <el-input v-model="listQuery.serviceName" placeholder="服务名" @keyup.enter="handleFilter" />
        </el-form-item>
        -->
        <el-form-item prop="interfaceDesc" label="接口描述">
          <el-input v-model="listQuery.interfaceDesc" placeholder="接口描述" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="interfaceUrl" label="接口地址">
          <el-input v-model="listQuery.interfaceUrl" placeholder="接口地址" @keyup.enter="handleFilter" />
        </el-form-item>
        <!--
        <el-form-item prop="clazz" label="处理类">
          <el-input v-model="listQuery.clazz" placeholder="处理类" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="method" label="处理方法">
          <el-input v-model="listQuery.method" placeholder="处理方法" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="reqContentType" label="请求ContentType">
          <el-input v-model="listQuery.reqContentType" placeholder="请求ContentType" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="reqProtocol" label="请求Protocol">
          <el-input v-model="listQuery.reqProtocol" placeholder="请求Protocol" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="reqScheme" label="请求Schema">
          <el-input v-model="listQuery.reqScheme" placeholder="请求Schema" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="reqPathInfo" label="请求PathInfo">
          <el-input v-model="listQuery.reqPathInfo" placeholder="请求PathInfo" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="reqPathTranslated" label="请求PathTranslated">
          <el-input v-model="listQuery.reqPathTranslated" placeholder="请求PathTranslated" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="reqRequestUri" label="请求URI">
          <el-input v-model="listQuery.reqRequestUri" placeholder="请求URI" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="reqRequestUrl" label="请求URL">
          <el-input v-model="listQuery.reqRequestUrl" placeholder="请求URL" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="reqContextPath" label="请求ContextPath">
          <el-input v-model="listQuery.reqContextPath" placeholder="请求ContextPath" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="reqMethod" label="请求Method">
          <el-input v-model="listQuery.reqMethod" placeholder="请求Method" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="reqAuthType" label="请求AuthType">
          <el-input v-model="listQuery.reqAuthType" placeholder="请求AuthType" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="reqServletPath" label="请求ServletPath">
          <el-input v-model="listQuery.reqServletPath" placeholder="请求ServletPath" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="reqRequestedSessionId" label="请求SessionId">
          <el-input v-model="listQuery.reqRequestedSessionId" placeholder="请求SessionId" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="reqRemoteUser" label="请求RemoteUser">
          <el-input v-model="listQuery.reqRemoteUser" placeholder="请求RemoteUser" @keyup.enter="handleFilter" />
        </el-form-item>
        -->
        <el-form-item prop="reqRemoteAddr" label="请求RemoteAddr">
          <el-input v-model="listQuery.reqRemoteAddr" placeholder="请求RemoteAddr" @keyup.enter="handleFilter" />
        </el-form-item>
        <!--
        <el-form-item prop="reqRemoteHost" label="请求RemoteHost">
          <el-input v-model="listQuery.reqRemoteHost" placeholder="请求RemoteHost" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="reqRemotePort" label="请求RemotePort">
          <el-input v-model="listQuery.reqRemotePort" placeholder="请求RemotePort" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="reqServerName" label="请求ServerName">
          <el-input v-model="listQuery.reqServerName" placeholder="请求ServerName" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="reqServerPort" label="请求ServerPort">
          <el-input v-model="listQuery.reqServerPort" placeholder="请求ServerPort" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="reqLocalAddr" label="请求LocalAddr">
          <el-input v-model="listQuery.reqLocalAddr" placeholder="请求LocalAddr" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="reqLocalName" label="请求LocalName">
          <el-input v-model="listQuery.reqLocalName" placeholder="请求LocalName" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="reqLocalPort" label="请求LocalPort">
          <el-input v-model="listQuery.reqLocalPort" placeholder="请求LocalPort" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="respStatus" label="响应Status">
          <el-input v-model="listQuery.respStatus" placeholder="响应Status" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="respCharacterEncoding" label="响应CharacterEncoding">
          <el-input v-model="listQuery.respCharacterEncoding" placeholder="响应CharacterEncoding" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item prop="respContentType" label="响应ContentType">
          <el-input v-model="listQuery.respContentType" placeholder="响应ContentType" @keyup.enter="handleFilter" />
        </el-form-item>
        -->
        <el-form-item prop="visitRequestId" label="访问请求ID">
          <el-input v-model="listQuery.visitRequestId" placeholder="访问请求ID" @keyup.enter="handleFilter" />
        </el-form-item>
        <el-form-item label="访问时间">
          <el-date-picker v-model="listQuery.visitTimeRange"
                          value-format="YYYY-MM-DD HH:mm:ss"
                          style="width: 380px"
                          type="datetimerange"
                          range-separator="-"
                          start-placeholder="访问时间开始"
                          end-placeholder="访问时间结束" />
        </el-form-item>
        <el-form-item prop="visitUser" label="访问用户ID">
          <User v-model="listQuery.visitUser" keyName="id" keyShow="name" placeholder="访问用户" title="用户查询" :disabled="useUserStore().organization.organizationType !== '1'" />
        </el-form-item>
        <!--
        <el-form-item prop="visitDuration" label="访问耗时(毫秒)">
          <el-input v-model="listQuery.visitDuration" placeholder="访问耗时(毫秒)" @keyup.enter="handleFilter" />
        </el-form-item>
        -->
        <el-form-item>
          <el-button v-waves type="success" icon="Search" @click="handleFilter">
            查询
          </el-button>
          <el-button icon="Refresh" @click="handleResetQuery">
            重置
          </el-button>
          <!--
          <el-button v-show="checkAuthByCode('')" type="primary" icon="Edit" @click="handleAdd">
            新增
          </el-button>
          -->
          <el-button v-show="checkAuthByCode('')" type="primary" icon="Download" @click="handleExport">
            导出
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider class="el-divider--horizontal-margin" />
    <el-table v-loading="listLoading"
              :key="tableKey"
              :data="list"
              :row-style="{height: '0'}"
              :cell-style="{padding: '0'}"
              border
              fit
              highlight-current-row
              tooltip-effect="dark"
              style="width: 100%;"
              @sort-change="handleSortChange"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="39px" />
      <el-table-column align="center" type="index" label="序号" width="60px" />
      <el-table-column v-if="isDebug" align="center" label="ID" prop="id" width="60px" sortable show-overflow-tooltip />
      <el-table-column align="center" label="系统" prop="system" min-width="80px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.system }}</template>
      </el-table-column>
      <el-table-column align="center" label="系统名称" prop="systemName" min-width="105px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.systemName }}</template>
      </el-table-column>
      <el-table-column align="center" label="服务" prop="service" min-width="80px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.service }}</template>
      </el-table-column>
      <el-table-column align="center" label="服务名" prop="serviceName" min-width="120px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.serviceName }}</template>
      </el-table-column>
      <el-table-column align="center" label="接口描述" prop="interfaceDesc" min-width="105px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.interfaceDesc }}</template>
      </el-table-column>
      <el-table-column align="center" label="接口地址" prop="interfaceUrl" min-width="105px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.interfaceUrl }}</template>
      </el-table-column>
      <el-table-column align="center" label="处理类" prop="clazz" min-width="120px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.clazz }}</template>
      </el-table-column>
      <el-table-column align="center" label="处理方法" prop="method" min-width="105px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.method }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求ContentType" prop="reqContentType" min-width="160px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqContentType }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求Protocol" prop="reqProtocol" min-width="255px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqProtocol }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求Schema" prop="reqScheme" min-width="205px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqScheme }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求PathInfo" prop="reqPathInfo" min-width="155px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqPathInfo }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求PathTranslated" prop="reqPathTranslated" min-width="170px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqPathTranslated }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求URI" prop="reqRequestUri" min-width="130px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqRequestUri }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求URL" prop="reqRequestUrl" min-width="130px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqRequestUrl }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求ContextPath" prop="reqContextPath" min-width="170px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqContextPath }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求QueryString" prop="reqQueryString" min-width="330px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqQueryString }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求Method" prop="reqMethod" min-width="205px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqMethod }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求AuthType" prop="reqAuthType" min-width="170px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqAuthType }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求ServletPath" prop="reqServletPath" min-width="330px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqServletPath }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求SessionId" prop="reqRequestedSessionId" min-width="170px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqRequestedSessionId }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求RemoteUser" prop="reqRemoteUser" min-width="170px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqRemoteUser }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求RemoteAddr" prop="reqRemoteAddr" min-width="170px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqRemoteAddr }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求RemoteHost" prop="reqRemoteHost" min-width="170px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqRemoteHost }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求RemotePort" prop="reqRemotePort" min-width="170px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqRemotePort }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求ServerName" prop="reqServerName" min-width="170px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqServerName }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求ServerPort" prop="reqServerPort" min-width="170px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqServerPort }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求LocalAddr" prop="reqLocalAddr" min-width="280px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqLocalAddr }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求LocalName" prop="reqLocalName" min-width="280px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqLocalName }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求LocalPort" prop="reqLocalPort" min-width="280px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqLocalPort }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求Cookies" prop="reqCookies" min-width="230px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqCookies }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求ParameterMap" prop="reqParameterMap" min-width="355px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqParameterMap }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求TrailerFields" prop="reqTrailerFields" min-width="380px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqTrailerFields }}</template>
      </el-table-column>
      <el-table-column align="center" label="请求Headers" prop="reqHeaders" min-width="230px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.reqHeaders }}</template>
      </el-table-column>
      <el-table-column align="center" label="响应Status" prop="respStatus" min-width="170px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.respStatus }}</template>
      </el-table-column>
      <el-table-column align="center" label="响应CharacterEncoding" prop="respCharacterEncoding" min-width="200px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.respCharacterEncoding }}</template>
      </el-table-column>
      <el-table-column align="center" label="响应ContentType" prop="respContentType" min-width="170px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.respContentType }}</template>
      </el-table-column>
      <el-table-column align="center" label="响应Headers" prop="respHeader" min-width="230px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.respHeader }}</template>
      </el-table-column>
      <el-table-column align="center" label="访问请求ID" prop="visitRequestId" min-width="155px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.visitRequestId }}</template>
      </el-table-column>
      <el-table-column align="center" label="访问时间" prop="visitTime" min-width="105px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ row.visitTime }}</template>
      </el-table-column>
      <el-table-column align="center" label="访问用户" prop="visitUser" min-width="155px" sortable show-overflow-tooltip>
        <template v-slot="{row}"><LabelTag :foreignList="userList" :foreign-ids="row.visitUser" :foreign-label="'name'" /></template>
      </el-table-column>
      <el-table-column align="center" label="访问耗时" prop="visitDuration" min-width="170px" sortable show-overflow-tooltip>
        <template v-slot="{row}">{{ convertDuration(row.visitDuration) }}</template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" width="180px" prop="createTime" sortable show-overflow-tooltip>
        <template v-slot="{row}"><DateTag :timestamp="row.createTime" /></template>
      </el-table-column>
      <el-table-column align="center" label="最后修改时间" width="180px" prop="updateTime" sortable show-overflow-tooltip>
        <template v-slot="{row}"><DateTag :timestamp="row.updateTime" /></template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="160px" fixed="right">
        <template v-slot="{row}">
          <el-button type="primary" link @click="handleView(row)">查看</el-button>
          <!--
          <el-button v-show="checkAuthByCode('')" type="primary" link @click="handleEdit(row)">编辑</el-button>
          <el-button v-show="checkAuthByCode('')" type="danger" link @click="handleDelete(row)">删除</el-button>
          -->
        </template>
      </el-table-column>
    </el-table>
    <pagination v-model:total="total" v-model:page="listQuery.pageNum" v-model:limit="listQuery.pageSize" @pagination="getList" />
    <el-dialog v-model="dialogVisible" :title="dialogTypeTitle" width="70%" top="2vh">
      <el-form class="my-form" ref="obj" :model="obj" :rules="rules" label-position="right" :disabled="dialogType === 'view'" label-width="auto">
        <el-form-item v-show="isDebug" label="ID">
          <text>{{ obj.id }}</text>
        </el-form-item>
        <el-form-item label="系统" prop="system">
          <el-input v-model="obj.system" placeholder="请输入系统，最多输入100个字符" />
        </el-form-item>
        <el-form-item label="系统名称" prop="systemName">
          <el-input v-model="obj.systemName" placeholder="请输入系统名称，最多输入100个字符" />
        </el-form-item>
        <el-form-item label="服务" prop="service">
          <el-input v-model="obj.service" placeholder="请输入服务，最多输入100个字符" />
        </el-form-item>
        <el-form-item label="服务名" prop="serviceName">
          <el-input v-model="obj.serviceName" placeholder="请输入服务名，最多输入100个字符" />
        </el-form-item>
        <el-form-item label="接口描述" prop="interfaceDesc">
          <el-input v-model="obj.interfaceDesc" placeholder="请输入接口描述，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="接口地址" prop="interfaceUrl">
          <el-input v-model="obj.interfaceUrl" placeholder="请输入接口地址，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="处理类" prop="clazz">
          <el-input v-model="obj.clazz" placeholder="请输入处理类，最多输入100个字符" />
        </el-form-item>
        <el-form-item label="处理方法" prop="method">
          <el-input v-model="obj.method" placeholder="请输入处理方法，最多输入100个字符" />
        </el-form-item>
        <el-form-item label="请求ContentType" prop="reqContentType">
          <el-input v-model="obj.reqContentType" placeholder="请输入请求ContentType，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="请求Protocol" prop="reqProtocol">
          <el-input v-model="obj.reqProtocol" placeholder="请输入请求Protocol，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="请求Schema" prop="reqScheme">
          <el-input v-model="obj.reqScheme" placeholder="请输入请求Schema，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="请求PathInfo" prop="reqPathInfo">
          <el-input v-model="obj.reqPathInfo" placeholder="请输入请求PathInfo，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="请求PathTranslated" prop="reqPathTranslated">
          <el-input v-model="obj.reqPathTranslated" placeholder="请输入请求PathTranslated，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="请求URI" prop="reqRequestUri">
          <el-input v-model="obj.reqRequestUri" placeholder="请输入请求URI，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="请求URL" prop="reqRequestUrl">
          <el-input v-model="obj.reqRequestUrl" placeholder="请输入请求URL，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="请求ContextPath" prop="reqContextPath">
          <el-input v-model="obj.reqContextPath" placeholder="请输入请求ContextPath，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="请求QueryString" prop="reqQueryString">
          <el-input v-model="obj.reqQueryString" :autosize="{ minRows: 2, maxRows: 5}" type="textarea" />
        </el-form-item>
        <el-form-item label="请求Method" prop="reqMethod">
          <el-input v-model="obj.reqMethod" placeholder="请输入请求Method，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="请求AuthType" prop="reqAuthType">
          <el-input v-model="obj.reqAuthType" placeholder="请输入请求AuthType，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="请求ServletPath" prop="reqServletPath">
          <el-input v-model="obj.reqServletPath" placeholder="请输入请求ServletPath，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="请求SessionId" prop="reqRequestedSessionId">
          <el-input v-model="obj.reqRequestedSessionId" placeholder="请输入请求SessionId，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="请求RemoteUser" prop="reqRemoteUser">
          <el-input v-model="obj.reqRemoteUser" placeholder="请输入请求RemoteUser，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="请求RemoteAddr" prop="reqRemoteAddr">
          <el-input v-model="obj.reqRemoteAddr" placeholder="请输入请求RemoteAddr，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="请求RemoteHost" prop="reqRemoteHost">
          <el-input v-model="obj.reqRemoteHost" placeholder="请输入请求RemoteHost，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="请求RemotePort" prop="reqRemotePort">
          <el-input v-model="obj.reqRemotePort" type="number" placeholder="请输入请求RemotePort" />
        </el-form-item>
        <el-form-item label="请求ServerName" prop="reqServerName">
          <el-input v-model="obj.reqServerName" placeholder="请输入请求ServerName，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="请求ServerPort" prop="reqServerPort">
          <el-input v-model="obj.reqServerPort" type="number" placeholder="请输入请求ServerPort" />
        </el-form-item>
        <el-form-item label="请求LocalAddr" prop="reqLocalAddr">
          <el-input v-model="obj.reqLocalAddr" placeholder="请输入请求LocalAddr，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="请求LocalName" prop="reqLocalName">
          <el-input v-model="obj.reqLocalName" placeholder="请输入请求LocalName，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="请求LocalPort" prop="reqLocalPort">
          <el-input v-model="obj.reqLocalPort" type="number" placeholder="请输入请求LocalPort" />
        </el-form-item>
        <el-form-item label="请求Cookies" prop="reqCookies">
          <el-input v-model="obj.reqCookies" :autosize="{ minRows: 2, maxRows: 5}" type="textarea" />
        </el-form-item>
        <el-form-item label="请求ParameterMap" prop="reqParameterMap">
          <el-input v-model="obj.reqParameterMap" :autosize="{ minRows: 2, maxRows: 5}" type="textarea" />
        </el-form-item>
        <el-form-item label="请求TrailerFields" prop="reqTrailerFields">
          <el-input v-model="obj.reqTrailerFields" :autosize="{ minRows: 2, maxRows: 5}" type="textarea" />
        </el-form-item>
        <el-form-item label="请求Headers" prop="reqHeaders">
          <el-input v-model="obj.reqHeaders" :autosize="{ minRows: 2, maxRows: 5}" type="textarea" />
        </el-form-item>
        <el-form-item label="响应Status" prop="respStatus">
          <el-input v-model="obj.respStatus" type="number" placeholder="请输入响应Status" />
        </el-form-item>
        <el-form-item label="响应CharacterEncoding" prop="respCharacterEncoding">
          <el-input v-model="obj.respCharacterEncoding" placeholder="请输入响应CharacterEncoding，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="响应ContentType" prop="respContentType">
          <el-input v-model="obj.respContentType" placeholder="请输入响应ContentType，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="响应Headers" prop="respHeader">
          <el-input v-model="obj.respHeader" :autosize="{ minRows: 2, maxRows: 5}" type="textarea" />
        </el-form-item>
        <el-form-item label="访问请求ID" prop="visitRequestId">
          <el-input v-model="obj.visitRequestId" placeholder="请输入访问请求ID，最多输入200个字符" />
        </el-form-item>
        <el-form-item label="访问时间" prop="visitTime">
          <el-date-picker v-model="obj.visitTime" placeholder="请输入访问时间" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
        <el-form-item label="访问用户ID" prop="visitUser">
          <el-input v-model="obj.visitUser" type="number" placeholder="请输入访问用户ID" />
        </el-form-item>
        <el-form-item label="访问耗时(毫秒)" prop="visitDuration">
          <el-input v-model="obj.visitDuration" type="number" placeholder="请输入访问耗时(毫秒)" />
        </el-form-item>
        <el-form-item label="创建时间">
          <text>{{ obj.createTime ? obj.createTime : '自动生成' }}</text>
        </el-form-item>
        <el-form-item label="最后修改时间">
          <text>{{ obj.updateTime ? obj.updateTime : '自动生成' }}</text>
        </el-form-item>
        <el-form-item v-show="isDebug" label="数据版本">
          <text>{{ obj.version }}</text>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="info" icon="Close" @click="dialogVisible=false">关闭</el-button>
        <el-button type="primary" icon="Check" v-show="dialogType !== 'view'" @click="doConfirm('obj')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {doGet, doPost, doPut, doDelete, doGetDownload} from '@/config/http'
import baseConfig from '@/mixins/baseConfig'
import {alertErrorMsg, convertDuration, customValidator, getListPageSize, notifySuccess} from "@/config/common";
import useUserStore from "@/store/modules/user";
import {getUserId} from "@/config/cookie";
import User from "@/views/components/base/selectUser.vue";
import initListStore from '@/store/modules/initList'

const emptyObj = {
  system: 'icims', // 系统
  systemName: '内控信息管理', // 系统名称
  service: 'icims-api', // 服务
  serviceName: '接口服务', // 服务名
  interfaceDesc: null, // 接口描述
  interfaceUrl: null, // 接口地址
  clazz: null, // 处理类
  method: null, // 处理方法
  reqContentType: null, // 请求ContentType
  reqProtocol: null, // 请求Protocol
  reqScheme: null, // 请求Schema
  reqPathInfo: null, // 请求PathInfo
  reqPathTranslated: null, // 请求PathTranslated
  reqRequestUri: null, // 请求URI
  reqRequestUrl: null, // 请求URL
  reqContextPath: null, // 请求ContextPath
  reqQueryString: null, // 请求QueryString
  reqMethod: null, // 请求Method
  reqAuthType: null, // 请求AuthType
  reqServletPath: null, // 请求ServletPath
  reqRequestedSessionId: null, // 请求SessionId
  reqRemoteUser: null, // 请求RemoteUser
  reqRemoteAddr: null, // 请求RemoteAddr
  reqRemoteHost: null, // 请求RemoteHost
  reqRemotePort: null, // 请求RemotePort
  reqServerName: null, // 请求ServerName
  reqServerPort: null, // 请求ServerPort
  reqLocalAddr: null, // 请求LocalAddr
  reqLocalName: null, // 请求LocalName
  reqLocalPort: null, // 请求LocalPort
  reqCookies: null, // 请求Cookies
  reqParameterMap: null, // 请求ParameterMap
  reqTrailerFields: null, // 请求TrailerFields
  reqHeaders: null, // 请求Headers
  respStatus: null, // 响应Status
  respCharacterEncoding: null, // 响应CharacterEncoding
  respContentType: null, // 响应ContentType
  respHeader: null, // 响应Headers
  visitRequestId: null, // 访问请求ID
  visitTime: null, // 访问时间
  visitUser: null, // 访问用户ID
  visitDuration: null, // 访问耗时(毫秒)
  id: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
  deleted: null,
  version: null,
}

export default {
  name: 'visit_nocache',
  components: {User},
  mixins: [baseConfig],
  data() {
    return {
      svc: 'icims-api',
      obj: Object.assign({}, emptyObj),
      routes: [],
      nameOfPermission: null,
      dialogVisible: false,
      dialogType: 'add',
      dialogTypeTitle: '新增',
      checkStrictly: false,
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: false,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        sortField: 'id',
        sortType: 'desc',
        system: null,
        systemName: null,
        service: null,
        serviceName: null,
        interfaceDesc: null,
        interfaceUrl: null,
        clazz: null,
        method: null,
        reqContentType: null,
        reqProtocol: null,
        reqScheme: null,
        reqPathInfo: null,
        reqPathTranslated: null,
        reqRequestUri: null,
        reqRequestUrl: null,
        reqContextPath: null,
        reqMethod: null,
        reqAuthType: null,
        reqServletPath: null,
        reqRequestedSessionId: null,
        reqRemoteUser: null,
        reqRemoteAddr: null,
        reqRemoteHost: null,
        reqRemotePort: null,
        reqServerName: null,
        reqServerPort: null,
        reqLocalAddr: null,
        reqLocalName: null,
        reqLocalPort: null,
        respStatus: null,
        respCharacterEncoding: null,
        respContentType: null,
        visitRequestId: null,
        visitTimeStart: null,
        visitTimeEnd: null,
        visitUser: useUserStore().organization.organizationType !== '1' ? getUserId() : '',
        visitDuration: null,
        createTimeStart: null,
        createTimeEnd: null,
        updateTimeStart: null,
        updateTimeEnd: null,
        visitTimeRange: [], //
      },
      selectionList: [],
      dialogFormVisible: false,
      dialogStatus: '',
      rules: {
        system: [{ required: false, validator: customValidator, min: 0, max: 100, label: '系统', trigger: ['blur', 'change'] }],
        systemName: [{ required: false, validator: customValidator, min: 0, max: 100, label: '系统名称', trigger: ['blur', 'change'] }],
        service: [{ required: false, validator: customValidator, min: 0, max: 100, label: '服务', trigger: ['blur', 'change'] }],
        serviceName: [{ required: false, validator: customValidator, min: 0, max: 100, label: '服务名', trigger: ['blur', 'change'] }],
        interfaceDesc: [{ required: false, validator: customValidator, min: 0, max: 200, label: '接口描述', trigger: ['blur', 'change'] }],
        interfaceUrl: [{ required: false, validator: customValidator, min: 0, max: 200, label: '接口地址', trigger: ['blur', 'change'] }],
        clazz: [{ required: false, validator: customValidator, min: 0, max: 100, label: '处理类', trigger: ['blur', 'change'] }],
        method: [{ required: false, validator: customValidator, min: 0, max: 100, label: '处理方法', trigger: ['blur', 'change'] }],
        reqContentType: [{ required: false, validator: customValidator, min: 0, max: 200, label: '请求ContentType', trigger: ['blur', 'change'] }],
        reqProtocol: [{ required: false, validator: customValidator, min: 0, max: 200, label: '请求Protocol', trigger: ['blur', 'change'] }],
        reqScheme: [{ required: false, validator: customValidator, min: 0, max: 200, label: '请求Schema', trigger: ['blur', 'change'] }],
        reqPathInfo: [{ required: false, validator: customValidator, min: 0, max: 200, label: '请求PathInfo', trigger: ['blur', 'change'] }],
        reqPathTranslated: [{ required: false, validator: customValidator, min: 0, max: 200, label: '请求PathTranslated', trigger: ['blur', 'change'] }],
        reqRequestUri: [{ required: false, validator: customValidator, min: 0, max: 200, label: '请求URI', trigger: ['blur', 'change'] }],
        reqRequestUrl: [{ required: false, validator: customValidator, min: 0, max: 200, label: '请求URL', trigger: ['blur', 'change'] }],
        reqContextPath: [{ required: false, validator: customValidator, min: 0, max: 200, label: '请求ContextPath', trigger: ['blur', 'change'] }],
        reqQueryString: [{ required: false, validator: customValidator, min: 0, max: 0, label: '请求QueryString', trigger: ['blur', 'change'] }],
        reqMethod: [{ required: false, validator: customValidator, min: 0, max: 200, label: '请求Method', trigger: ['blur', 'change'] }],
        reqAuthType: [{ required: false, validator: customValidator, min: 0, max: 200, label: '请求AuthType', trigger: ['blur', 'change'] }],
        reqServletPath: [{ required: false, validator: customValidator, min: 0, max: 200, label: '请求ServletPath', trigger: ['blur', 'change'] }],
        reqRequestedSessionId: [{ required: false, validator: customValidator, min: 0, max: 200, label: '请求SessionId', trigger: ['blur', 'change'] }],
        reqRemoteUser: [{ required: false, validator: customValidator, min: 0, max: 200, label: '请求RemoteUser', trigger: ['blur', 'change'] }],
        reqRemoteAddr: [{ required: false, validator: customValidator, min: 0, max: 200, label: '请求RemoteAddr', trigger: ['blur', 'change'] }],
        reqRemoteHost: [{ required: false, validator: customValidator, min: 0, max: 200, label: '请求RemoteHost', trigger: ['blur', 'change'] }],
        reqRemotePort: [{ required: false, validator: customValidator, min: 0, max: 10, label: '请求RemotePort', trigger: ['blur', 'change'] }],
        reqServerName: [{ required: false, validator: customValidator, min: 0, max: 200, label: '请求ServerName', trigger: ['blur', 'change'] }],
        reqServerPort: [{ required: false, validator: customValidator, min: 0, max: 10, label: '请求ServerPort', trigger: ['blur', 'change'] }],
        reqLocalAddr: [{ required: false, validator: customValidator, min: 0, max: 200, label: '请求LocalAddr', trigger: ['blur', 'change'] }],
        reqLocalName: [{ required: false, validator: customValidator, min: 0, max: 200, label: '请求LocalName', trigger: ['blur', 'change'] }],
        reqLocalPort: [{ required: false, validator: customValidator, min: 0, max: 10, label: '请求LocalPort', trigger: ['blur', 'change'] }],
        reqCookies: [{ required: false, validator: customValidator, min: 0, max: 0, label: '请求Cookies', trigger: ['blur', 'change'] }],
        reqParameterMap: [{ required: false, validator: customValidator, min: 0, max: 0, label: '请求ParameterMap', trigger: ['blur', 'change'] }],
        reqTrailerFields: [{ required: false, validator: customValidator, min: 0, max: 0, label: '请求TrailerFields', trigger: ['blur', 'change'] }],
        reqHeaders: [{ required: false, validator: customValidator, min: 0, max: 0, label: '请求Headers', trigger: ['blur', 'change'] }],
        respStatus: [{ required: false, validator: customValidator, min: 0, max: 10, label: '响应Status', trigger: ['blur', 'change'] }],
        respCharacterEncoding: [{ required: false, validator: customValidator, min: 0, max: 200, label: '响应CharacterEncoding', trigger: ['blur', 'change'] }],
        respContentType: [{ required: false, validator: customValidator, min: 0, max: 200, label: '响应ContentType', trigger: ['blur', 'change'] }],
        respHeader: [{ required: false, validator: customValidator, min: 0, max: 0, label: '响应Headers', trigger: ['blur', 'change'] }],
        visitRequestId: [{ required: false, validator: customValidator, min: 0, max: 200, label: '访问请求ID', trigger: ['blur', 'change'] }],
        visitTime: [{ required: false, validator: customValidator, min: 0, max: 0, label: '访问时间', trigger: ['blur', 'change'] }],
        visitUser: [{ required: false, validator: customValidator, min: 0, max: 20, label: '访问用户ID', trigger: ['blur', 'change'] }],
        visitDuration: [{ required: false, validator: customValidator, min: 0, max: 20, label: '访问耗时(毫秒)', trigger: ['blur', 'change'] }],
      },
      userList: initListStore().userList,
    }
  },
  computed: {
    routesData() {
      return this.routes
    }
  },
  created() {
    this.nameOfPermission = 'visit'
    this.getFavorite(this.nameOfPermission)?.then(res => this.userFavorites = res)
    this.getList()
    // this.initList()
  },
  methods: {
    useUserStore,
    convertDuration,
    // async initList() {
    //   let p1 = doGet(this.svc, '/user/page', {pageSize: getListPageSize()}, false)
    //   let resArray = await Promise.all([p1])
    //   this.userList = resArray[0]['records']
    // },
    getList() {
      this.listLoading = true
      this.listQuery.visitTimeStart = ''
      this.listQuery.visitTimeEnd = ''
      if (this.listQuery.visitTimeRange) {
        this.listQuery.visitTimeStart = this.listQuery.visitTimeRange[0]
        this.listQuery.visitTimeEnd = this.listQuery.visitTimeRange[1]
      }
      doGet(this.svc, '/visit/page', this.listQuery).then(res => {
        this.listLoading = false
        this.list = res['records']
        this.total = parseInt(res['total'])
      }).catch(e => {
        console.error(e)
        this.listLoading = false
      })
    },
    handleResetQuery() {
      this.resetForm("listQuery")
      this.listQuery.visitTimeStart = ''
      this.listQuery.visitTimeEnd = ''
      this.listQuery.visitTimeRange = []
    },
    handleFilter() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: '操作Success',
        type: 'success'
      })
      row.status = status
    },
    handleSelectionChange(data) {
      this.selectionList = data
    },
    handleSortChange(data) {
      const { prop, order } = data
      this.listQuery.sortField = prop
      this.listQuery.sortType = order === 'ascending' ? 'asc' : 'desc'
      this.handleFilter()
    },
    handleEdit(row) {
      this.dialogType = 'edit'
      this.dialogTypeTitle = '编辑'
      this.dialogVisible = true
      this.checkStrictly = true
      this.obj = Object.assign({}, row)
    },
    handleView(row) {
      this.dialogType = 'view'
      this.dialogTypeTitle = '详情'
      this.dialogVisible = true
      this.checkStrictly = false
      this.obj = Object.assign({}, row)
    },
    handleAdd() {
      this.dialogType = 'add'
      this.dialogTypeTitle = '新增'
      this.dialogVisible = true
      this.checkStrictly = true
      this.obj = Object.assign({}, emptyObj)
    },
    handleExport() {
      doGetDownload(this.svc, '/visit/export', this.listQuery)
    },
    handleDelete(row) {
      this.$confirm('您确定删除么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        doDelete(this.svc, '/visit/' + row.id, {}).then(() => {
          notifySuccess('操作成功')
          this.getList()
          this.dialogVisible = false
        })
      }).catch(e => {
        console.error(e)
      })
    },
    async doConfirm(formName) {
      let v = await this.$refs[formName].validate().catch((err)=>{return err})
      if (v !== true) {
        alertErrorMsg('表单验证不通过，请检查数据。')
        return
      }
      if (this.dialogType === 'edit') {
        doPut(this.svc, '/visit/modify', this.obj).then(() => {
          notifySuccess('操作成功')
          this.getList()
          this.dialogVisible = false
        })
      } else if (this.dialogType === 'add') {
        doPost(this.svc, '/visit/add', this.obj).then(() => {
          notifySuccess('操作成功')
          this.getList()
          this.dialogVisible = false
        })
      }
    },
  }
}
</script>
